<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common :: header"></head>
</head>

<body>
<!--Page content-->
<div id="page-content" class=" animated fadeIn">

    <!-- JVM 信息 -->
    <div class="row">
        <div class="col-sm-2 col-xl-2">
            <div class="panel text-center panel-primary panel-colorful">
                <div class="panel-heading">
                    <span class="panel-title">JVM 总内存</span>
                </div>
                <div class="panel-body">
                    <p id="totalMemory">正在加载...</p>
                </div>

            </div>
        </div>
        <div class="col-sm-2 col-xl-2">
            <div class="panel text-center panel-warning panel-colorful">
                <div class="panel-heading">
                    <span class="panel-title">JVM 已用内存</span>
                </div>
                <div class="panel-body">
                    <p id="runTimeMemory">正在加载...</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2 col-xl-2">
            <div class="panel text-center panel-success panel-colorful">
                <div class="panel-heading">
                    <span class="panel-title">JVM 剩余内存</span>
                </div>
                <div class="panel-body">
                    <p id="freeMemory">正在加载...</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2 col-xl-2">
            <div class="panel text-center panel-info panel-colorful">
                <div class="panel-heading">
                    <span class="panel-title">JDK 目录</span>
                </div>
                <div class="panel-body">
                    <p id="home">正在加载...</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2 col-xl-2">
            <div class="panel text-center panel-mint panel-colorful">
                <div class="panel-heading">
                    <span class="panel-title">启动时间</span>
                </div>
                <div class="panel-body">
                    <p id="startTime">正在加载...</p>
                </div>
            </div>
        </div>
        <div class="col-sm-2 col-xl-2">
            <div class="panel text-center panel-colorful">
                <div class="panel-heading">
                    <span class="panel-title">运行时长</span>
                </div>
                <div class="panel-body">
                    <p id="runTime">正在加载...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 基本信息 -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">系统信息</span>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <td><span style="font-weight: 600">名称</span></td>
                                <td id="sysName">正在加载...</td>
                                <td><span style="font-weight: 600">架构</span></td>
                                <td id="sysArch">正在加载...</td>
                            </tr>
                            <tr>
                                <td><span style="font-weight: 600">版本</span></td>
                                <td id="sysVersion">正在加载...</td>
                                <td><span style="font-weight: 600">IP 地址</span></td>
                                <td id="sysIp">正在加载...</td>
                            </tr>
                            <tr>
                                <td><span style="font-weight: 600">项目部署目录</span></td>
                                <td id="userDir" colspan="3">正在加载...</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CPU 和内存信息 -->
    <div class="row">
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">CPU 信息</span>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <th>名称</th>
                                <td id="name">正在加载...</td>
                            </tr>
                            <tr>
                                <th>核心数</th>
                                <td id="physicalCount">正在加载...</td>
                            </tr>
                            <tr>
                                <th>逻辑数</th>
                                <td id="logicalCount">正在加载...</td>
                            </tr>
                            <tr>
                                <th>当前线程数</th>
                                <td id="threadCount">正在加载...</td>
                            </tr>
                            <tr>
                                <th>其他</th>
                                <td id="other" ></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <!-- Search List -->
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">内存信息</span>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <th>总内存</th>
                                <td id="total">正在加载...</td>
                            </tr>
                            <tr>
                                <th>已使用内存</th>
                                <td id="used">正在加载...</td>
                            </tr>
                            <tr>
                                <th>可用内存</th>
                                <td id="available">正在加载...</td>
                            </tr>
                            <tr>
                                <th>总交换内存</th>
                                <td id="swapTotal">正在加载...</td>
                            </tr>
                            <tr>
                                <th>已使用交换内存</th>
                                <td id="swapUsed">正在加载...</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 硬盘信息 -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title"> 硬盘信息</span>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table id="hardwareTable" class="table table-striped">
                            <thead>
                            <tr class="bg-light">
                                <th class="">盘符</th>
                                <th class="">格式类型</th>
                                <th class="">总容量</th>
                                <th class="">已用容量</th>
                                <th class="">可用容量</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr><td colspan="5">正在加载...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!--End page content-->
<div th:include="common :: script"></div>
<script type="text/javascript" th:inline="javascript" >

    var prefix = [[${prefix}]];

    $(function() {
        ServerInfo.init();
//        setInterval(function() {
//            getServerInfo();
//        }, 2000);
    });

    var ServerInfo = {
        init: function() {
            $.freedom.action.request(prefix + "/getServerInfo.json",null, function(resp) {
                var server = resp.data;
                ServerInfo.setJvmInfo(server.jvm);
                ServerInfo.setBasicInfo(server.basic);
                ServerInfo.setCpuInfo(server.cpu);
                ServerInfo.setMemoryInfo(server.memory);
                ServerInfo.setHardwareInfo(server.hardwareList);
            });
        },
        setJvmInfo: function(jvm) {
            for (var key in jvm) {
                $("#" + key).text(jvm[key]);
            }
        },
        setBasicInfo: function(basic) {
            for (var key in basic) {
                $("#" + key).text(basic[key]);
            }
        },
        setCpuInfo: function(cpu) {
            for (var key in cpu) {
                $("#" + key).text(cpu[key]);
            }
        },
        setMemoryInfo: function(memory) {
            for (var key in memory) {
                $("#" + key).text(memory[key]);
            }
        },
        setHardwareInfo: function(hardwareList) {
            var html = [];
            for(var i = 0, len = hardwareList.length; i < len; i++) {
                var hardware = hardwareList[i];
                html.push("<tr><td class='w200' style='text-align: left'>" + hardware.name + "</td>");
                html.push("<td class=''>" + hardware.type + "</td>");
                html.push("<td class=''>" + hardware.totalSpace + "</td>");
                html.push("<td class=''>" + hardware.usabledSpace + "</td>");
                html.push("<td class=''>" + hardware.freeSpace + "</td></tr>");
            }

            $("#hardwareTable").find("tbody").html(html.join(""));
        }

    }

</script>
</body>
</html>
